<template>
    <div class="tag-page">
        <b-tag>this is tag</b-tag>
        <b-tag type="dot">this is dot</b-tag>
        <b-tag closable>tag closable</b-tag>
        <b-tag type="dot" closable>dot closable</b-tag>
        <hr/>
        <h3>size:default mediun large</h3>
        <b-tag>默认标签</b-tag>
        <b-tag size="medium">中等标签</b-tag>
        <b-tag size="large">大号标签</b-tag>
        <b-tag size="medium" type="dot">中等标签</b-tag>
        <b-tag size="large" type="dot">大号标签</b-tag>
        <b-tag size="medium" type="dot" closable>中等标签</b-tag>
        <b-tag size="large" type="dot" closable>大号标签</b-tag>
        <b-tag size="large" type="border" closable>大号标签</b-tag>
        <hr/>
        <h3>tag color</h3>
        <b-tag>默认标签</b-tag>
        <b-tag  color="info">info</b-tag>
        <b-tag  color="success">success</b-tag>
        <b-tag  color="warning">warning</b-tag>
        <b-tag  color="error">error</b-tag>
        <b-tag  closable color="joker">joker</b-tag>
        <b-tag  closable color="primary">大号标签</b-tag>
        <hr>
        <b-tag plain>默认标签</b-tag>
        <b-tag plain  color="info">info</b-tag>
        <b-tag plain  color="success">success</b-tag>
        <b-tag plain  color="warning">warning</b-tag>
        <b-tag plain  color="error">error</b-tag>
        <b-tag plain  closable color="joker">joker</b-tag>
        <b-tag plain  closable color="primary">大号标签</b-tag>
        <hr>
        <b-tag type="dot">默认标签</b-tag>
        <b-tag type="dot"  color="info">info</b-tag>
        <b-tag type="dot"  color="success">success</b-tag>
        <b-tag type="dot"  color="warning">warning</b-tag>
        <b-tag type="dot"  color="error">error</b-tag>
        <b-tag type="dot"  closable color="joker">joker</b-tag>
        <b-tag type="dot"  closable color="primary">大号标签</b-tag>
        <hr>
        <h3>自定义颜色</h3>
        <b-tag type="dot" color="yellow">自定义color</b-tag>
        <b-tag type="dot" color="purple">自定义color</b-tag>
        <b-tag type="dot" color="#ffa2d3">自定义color</b-tag>

        <b-tag color="yellow">自定义color</b-tag>
        <b-tag color="purple">自定义color</b-tag>
        <b-tag color="#ffa2d3">自定义color</b-tag>

        <b-tag color="yellow" plain>自定义color</b-tag>
        <b-tag color="purple" plain>自定义color</b-tag>
        <b-tag color="#ffa2d3" plain>自定义color</b-tag>
    </div>
</template>
<script>
export default {
    name:'TagPage',
    props:{
        validator(value){
            return oneOf(value,['border','dot'])
        },
        default:'border'
    }
}
</script>
<style scoped>
.tag-page{
    padding: 10px 0px;
}
hr{
    margin: 15px 0px;
}
</style>